<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    body {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #box {
        width: 1000px;
        height: 430px;
        position: relative;
    }

    .box-img {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all 1.5s;
    }

    .box-img:nth-child(1) {
        opacity: 1;
    }

    #box-left {
        position: absolute;
        width: 35px;
        height: 70px;
        background-color: transparent;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 0 5px 5px 0;
        text-align: center;
        line-height: 70px;
        font-size: 27px;
        color: lightgray;
    }

    #box-left:hover {
        background-color: rgb(122, 122, 122);
        color: #eee;
    }

    #box-right {
        position: absolute;
        width: 35px;
        height: 70px;
        background-color: transparent;
        left: 100%;
        top: 50%;
        transform: translate(-100%, -50%);
        border-radius: 5px 0 0 5px;
        text-align: center;
        line-height: 70px;
        font-size: 27px;
        color: lightgray;
    }

    #box-right:hover {
        background-color: rgb(122, 122, 122);
        color: #eee;
    }

    #down {
        position: absolute;
        bottom: 20px;
        right: 50px;
    }

    #down ul {
        list-style: none;
    }

    #down li {
        width: 12px;
        height: 12px;
        border-radius: 100%;
        background-color: #ccc;
        float: left;
        margin-right: 20px;
    }

    #down li:nth-child(1) {
        background-color: lightgreen;
    }

    #down li:hover {
        background-color: white;

    }
</style>

<body>
    <div id="box">
        <div class="box-img">
            <img src="images/1.webp" width="1000px" height="460px">
        </div>
        <div class="box-img">
            <img src="images/2.jpg" width="1000px" height="460px">
        </div>
        <div class="box-img">
            <img src="images/3.webp" width="1000px" height="460px">
        </div>
        <div class="box-img">
            <img src="images/4.webp" width="1000px" height="460px">
        </div>
        <div id="box-left">&lt;</div>
        <div id="box-right">&gt;</div>
        <div id="down">
            <ul>
                <li class="btn"></li>
                <li class="btn"></li>
                <li class="btn"></li>
                <li class="btn"></li>
            </ul>
        </div>

    </div>
</body>

<script src="jquery.js"></script>
<script>
    function operation(index) {
        $('.box-img').css('opacity', '0');
        $('.box-img').eq(index).css('opacity', '1');
        $('.btn').css('background-color', '#eee');
        $('.btn').eq(index).css('background-color', 'lightgreen');
    }
    $(function () {
        // 标记当前图片的索引
        var index = 0;
        // 定时器
        var timer;
        // 通过节流，防止图片自动翻转和用户点击同时发生导致图片切换两次
        function boundce(index) {
            if (timer) {
                clearInterval(timer);
            }
            timer = setInterval(() => {
                if (index == $('.box-img').length - 1) {
                    index = 0;
                    operation(index);
                } else {
                    index++;
                    operation(index);
                }
            }, 4000);
        }

        boundce(index);

        // 左侧按钮
        $('#box-left').click(() => {
            boundce(index);
            if (index == 0) {
                index = $('.box-img').length - 1;
                operation(index);
            } else {
                index--;
                operation(index);
            }
        })
        // 右侧按钮
        $('#box-right').click(() => {
            boundce(index);
            if (index == $('.box-img').length - 1) {
                index = 0;
                operation(index);
            } else {
                index++;
                operation(index);
            }
        })
        // 下方小圆按钮
        $('.btn').click(function () {
            boundce(index);
            var i = $(this).index();
            index = i;
            operation(index);
        })

    })
</script>

</html>